<template>
    <div class="container">
        <div class="demo">
            <div class="demo-title">配合Popup组件进行使用</div>
            <div class="demo-title">Props</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>参数</td>
                        <td>说明</td>
                        <td>类型</td>
                        <td>默认值</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>open</td>
                        <td>打开</td>
                        <td>Boolean</td>
                        <td>false</td>
                    </tr>
                    <tr>
                        <td>defaultChange</td>
                        <td>默认值</td>
                        <td>Array</td>
                        <td>["110000", "110100", "110101"]</td>
                    </tr>
                    <tr>
                        <td>mask</td>
                        <td>是否显示遮罩层</td>
                        <td>Boolean</td>
                        <td>true</td>
                    </tr>
                    <tr>
                        <td>showHeader</td>
                        <td>是否显示头部</td>
                        <td>Boolean</td>
                        <td>true</td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td>头部标题</td>
                        <td>String</td>
                        <td>-</td>
                    </tr>
                </tbody>
            </table>
            <div class="demo-title">Events</div>
            <table border="1">
                <thead>
                    <tr>
                        <td>事件</td>
                        <td>说明</td>
                        <td>回调参数</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>cancel</td>
                        <td>取消按钮返回事件</td>
                        <td>无</td>
                    </tr>
                    <tr>
                        <td>confirm</td>
                        <td>确定按钮返回事件</td>
                        <td>返回当前选中的地区码数组</td>
                    </tr>
                </tbody>
            </table>
            <div class="demo-title">选中的值</div>
            <div class="demo-params">{{resultData}}</div>
            <button @click="open = true">打开</button>
        </div>
        <areaSelect :open.sync="open" @confirm="confirm" :defaultChange="defaultChange"></areaSelect>
    </div>
</template>

<script>
import areaSelect from "@/components/select/areaSelect"
export default {
    name: 'demo-area-select',
    components: { areaSelect },
    data(){
        return {
            open: false,
            defaultChange: [],
            resultData: null
        }
    },
    methods: {
        confirm(obj){
            this.resultData = obj
            let arr = [obj.province.id, obj.city.id, obj.county.id]
            this.defaultChange = arr
        }
    }
}
</script>

<style lang="less" scoped>

</style>